<template>
  <transition appear appear-active-class="fadeInUpMini">
    <div class="chat">
      <div
        class="chat-card"
        v-for="item in cardConfig"
        :key="item.id"
        @click="goDetail(item)"
      >
        <h-card :cardItem="item"></h-card>
      </div>
      <div v-if="hasInvail">
        <div
          class="chat-card"
          v-for="item in chatList"
          :key="item.userId"
          @click="goChat(item)"
        >
          <h-card>
            <div class="chat-card-left">
              <img :src="item.avatar" alt="" class="chat-card-left-msg" />
              <div class="chat-card-left-message">
                <div>{{ item.realname }} | {{ formatTimes(item.time) }}</div>
                <div>{{ item.message }}</div>
              </div>
            </div>
          </h-card>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import HCard from "@/componentMobile/HCard.vue";
import { ref, onMounted, computed } from "vue";
import axios from "@/http";
import { useRouter } from "vue-router";
import { formatTime } from "@/formatTime";
import store from "@/store";
type TChatConfig = {
  id: number;
  name: string;
  router: string;
};
type TChatMenu = {
  avatar: string;
  message: string;
  realname: string;
  time: string;
  userId: number;
};
const router = useRouter();
const cardConfig = [
  { id: 1, name: "聊天室", router: "/chatRoom-h5" },
  { id: 2, name: "联系我", router: "/chatMe-h5" },
];
const chatList = ref<TChatMenu[]>([]);
onMounted(() => {
  hasInvail.value && getChatList();
});
const formatTimes = computed(() => {
  return (time: string) => formatTime(time);
});
const hasInvail = computed(() => {
  return store.getters.user.status === "876ea4f21078c7d38e3b0bdc74a";
});
const getChatList = () => {
  axios.get("/chat/lastSearch").then((res: any) => {
    if (res.data.error === -1) {
      chatList.value = res.data.data;
    } else {
      chatList.value = [];
    }
  });
};
const goDetail = (item: TChatConfig) => {
  router.push(item.router);
};
const goChat = (item: TChatMenu) => {
  router.push(`/chatMe-h5?id=${item.userId}`);
};
</script>
<style scoped lang="scss">
.chat {
  &-card {
    &-left {
      display: flex;
      font-size: 12px;
      &-msg {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        margin-right: 8px;
      }
      &-message {
        color: $font-color-qian;
        width: 200px;
        div {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        div:nth-child(2) {
          color: $blue;
          margin-top: 2px;
        }
      }
    }
  }
}
</style>
